<template>
  <div
   
    id="0a6c39e1121b4025b0cac59654cf99ae"
    class="chart-container"
    style="width: 900px; height: 500px"
  ></div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
onMounted(() => {
  var chart_0a6c39e1121b4025b0cac59654cf99ae = echarts.init(
    document.getElementById("0a6c39e1121b4025b0cac59654cf99ae"),
    "white",
    { renderer: "canvas" }
  );

  var option_0a6c39e1121b4025b0cac59654cf99ae = {
  animation: true,
  animationThreshold: 2000,
  animationDuration: 1000,
  animationEasing: "cubicOut",
  animationDelay: 0,
  animationDurationUpdate: 300,
  animationEasingUpdate: "cubicOut",
  animationDelayUpdate: 0,
  aria: {
    enabled: false,
  },
  color: [
    "#5470c6",
    "#91cc75",
    "#fac858",
    "#ee6666",
    "#73c0de",
    "#3ba272",
    "#fc8452",
    "#9a60b4",
    "#ea7ccc",
  ],
  series: [
    {
      type: "pie",
      colorBy: "data",
      legendHoverLink: true,
      selectedMode: false,
      selectedOffset: 10,
      clockwise: true,
      startAngle: 90,
      minAngle: 0,
      minShowLabelAngle: 0,
      avoidLabelOverlap: true,
      stillShowZeroSum: true,
      percentPrecision: 2,
      showEmptyCircle: true,
      emptyCircleStyle: {
        color: "lightgray",
        borderColor: "#000",
        borderWidth: 0,
        borderType: "solid",
        borderDashOffset: 0,
        borderCap: "butt",
        borderJoin: "bevel",
        borderMiterLimit: 10,
        opacity: 1,
      },
      data: [
        {
          name: "\u6291\u90c1 Less than 5 hours",
          value: 70,
        },
        {
          name: "\u6291\u90c1 5-6 hours",
          value: 78,
        },
        {
          name: "\u6291\u90c1 7-8 hours",
          value: 60,
        },
        {
          name: "\u6291\u90c1 More than 8 hours",
          value: 44,
        },
        {
          name: "\u975e\u6291\u90c1 Less than 5 hours",
          value: 50,
        },
        {
          name: "\u975e\u6291\u90c1 5-6 hours",
          value: 58,
        },
        {
          name: "\u975e\u6291\u90c1 7-8 hours",
          value: 71,
        },
        {
          name: "\u975e\u6291\u90c1 More than 8 hours",
          value: 71,
        },
      ],
      radius: ["40%", "70%"],
      center: [320, 260],
      label: {
        show: true,
        margin: 8,
      },
      labelLine: {
        show: true,
        showAbove: false,
        length: 15,
        length2: 15,
        smooth: false,
        minTurnAngle: 90,
        maxSurfaceAngle: 90,
      },
      rippleEffect: {
        show: true,
        brushType: "stroke",
        scale: 2.5,
        period: 4,
      },
    },
  ],
  legend: [
    {
      data: [
        "\u6291\u90c1 Less than 5 hours",
        "\u6291\u90c1 5-6 hours",
        "\u6291\u90c1 7-8 hours",
        "\u6291\u90c1 More than 8 hours",
        "\u975e\u6291\u90c1 Less than 5 hours",
        "\u975e\u6291\u90c1 5-6 hours",
        "\u975e\u6291\u90c1 7-8 hours",
        "\u975e\u6291\u90c1 More than 8 hours",
      ],
      selected: {},
      show: false,
      padding: 5,
      itemGap: 10,
      itemWidth: 25,
      itemHeight: 14,
      backgroundColor: "transparent",
      borderColor: "#ccc",
      borderWidth: 1,
      borderRadius: 0,
      pageButtonItemGap: 5,
      pageButtonPosition: "end",
      pageFormatter: "{current}/{total}",
      pageIconColor: "#2f4554",
      pageIconInactiveColor: "#aaa",
      pageIconSize: 15,
      animationDurationUpdate: 800,
      selector: false,
      selectorPosition: "auto",
      selectorItemGap: 7,
      selectorButtonGap: 10,
    },
  ],
  tooltip: {
    show: true,
    trigger: "item",
    triggerOn: "mousemove|click",
    axisPointer: {
      type: "line",
    },
    showContent: true,
    alwaysShowContent: false,
    showDelay: 0,
    hideDelay: 100,
    enterable: false,
    confine: false,
    appendToBody: false,
    transitionDuration: 0.4,
    textStyle: {
      fontSize: 14,
    },
    borderWidth: 0,
    padding: 5,
    order: "seriesAsc",
  },
  title: [
    {
      show: true,
      text: "\u7761\u7720\u65f6\u95f4\u4e0e\u6291\u90c1\u60c5\u51b5\u7684\u5173\u7cfb",
      target: "blank",
      subtarget: "blank",
      left: 200,
      padding: 5,
      itemGap: 10,
      textAlign: "auto",
      textVerticalAlign: "auto",
      triggerEvent: false,
    },
  ],
};
chart_0a6c39e1121b4025b0cac59654cf99ae.setOption(
  option_0a6c39e1121b4025b0cac59654cf99ae
);
});


</script>

<style lang="scss" scoped></style>
